<template>
  <LayoutSider
    v-model="reCollapsed"
    :theme="theme"
    :width="208"
    :collapsed-width="48"
    :class="{ 'pro-global-sider-fixed': fixed, 'pro-global-sider-has-header': header }"
    collapsible
    class="pro-global-sider"
  >
    <template #trigger>
      <div class="pro-global-sider-trigger-wrapper" :style="reCollapsed ? null : { 'padding': '0 24px' }">
        <Icon :type="reCollapsed ? 'menu-unfold': 'menu-fold'" />
      </div>
    </template>
    <ProLogo v-if="logo" />
    <ProScrollbar class="pro-global-sider-scrollbar" wrap-style="overflow-x: hidden;" :light="theme === 'dark'">
      <ProSiderMenu
        :selected-key.sync="reSelectedKey"
        :theme="theme"
        :data="data"
        :collapsed="reCollapsed"
      />
    </ProScrollbar>
  </LayoutSider>
</template>

<script>
import { Layout, Icon } from 'ant-design-vue'
import { Scrollbar } from '@hczy/ant-design-vue'

import ProLogo from './Logo.vue'
import ProSiderMenu from './SiderMenu'

export default {
  name: 'ProSider',
  components: {
    LayoutSider: Layout.Sider,
    Icon,
    ProLogo,
    ProSiderMenu,
    ProScrollbar: Scrollbar
  },
  model: {
    prop: 'collapsed',
    event: 'update:collapsed'
  },
  props: {
    fixed: Boolean,
    collapsed: Boolean,
    theme: {
      type: String,
      default: 'dark',
      validator: v => ['light', 'dark'].includes(v)
    },
    data: {
      type: Array,
      required: true
    },
    selectedKey: String,
    header: Boolean,
    logo: Boolean
  },
  computed: {
    reCollapsed: {
      set(value) { this.$emit('update:collapsed', value) },
      get() { return !!this.collapsed }
    },
    reSelectedKey: {
      get() { return this.selectedKey },
      set(key) { this.$emit('selectChange', key) }
    }
  }
}
</script>

<style lang="less">
.pro-global-sider {

  &.ant-layout-sider {
    position: relative;

    .ant-layout-sider-children {
      display: flex;
      flex-direction: column;
    }

    .ant-layout-sider-trigger {
      background-color: transparent;
    }
  }

  &&-fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    overflow: hidden auto;
    box-shadow: 2px 0 8px 0 fade(@layout-header-background, 5%);
    box-shadow: 2px 0 8px 0 fade(#1d2329, 5%);
  }

  &&-has-header {
    top: @layout-header-height;
    height: calc(100% - @layout-header-height);
  }

  &-scrollbar {
    flex: 1 1 0%;
  }

  &-trigger-wrapper {
    height: @layout-trigger-height;
    padding: 0 16px;
    text-align: left;
    border-top: @border-width-base @border-style-base fade(@black, 25);
    transition: padding .3s;
  }

  &.ant-layout-sider-light &-trigger-wrapper {
    border-top-color: @border-color-split;
  }

  &.ant-layout-sider-light {
    .ant-menu-vertical .ant-menu-item::after,
    .ant-menu-vertical-left .ant-menu-item::after,
    .ant-menu-vertical-right .ant-menu-item::after,
    .ant-menu-inline .ant-menu-item::after {
      left: 0;
      right: auto;
    }
  }

  .ant-menu-inline,
  .ant-menu-vertical, .ant-menu-vertical-left {
    border-right: none;
  }

  .ant-menu-inline .ant-menu-item,
  .ant-menu-inline .ant-menu-submenu-title {
    width: 100%; // 去除自定义滚动条
  }
}
</style>
